<template>
  <div class="container-section">
    <el-row class="el-row-flex">
      <div class="grid-content bg-purple">统计日期：</div>
      <el-date-picker v-model="dateRange" type="daterange" align="right" unlink-panels range-separator="到"
        :clearable="false" value-format="yyyy-MM-dd" format="yyyy-MM-dd" @change="changeTime" start-placeholder="开始日期"
        end-placeholder="结束日期" :picker-options="pickerOptions">
      </el-date-picker>
      <el-button class="el-icon-refresh" size="small" style="margin-left: 12px;" @click="getData"></el-button>
    </el-row>
    <el-row class="el-row-flex" v-loading="loading">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="doctorname" label="医生名称" min-width="120">
        </el-table-column>
        <el-table-column label="已审核报卡" align="center">
          <el-table-column prop="totalauditcount" label="数量" min-width="80">
            <template slot-scope="{row, column, $index }">
              {{ showNumberText(row.totalauditcount) }}
            </template>
          </el-table-column>
          <el-table-column prop="totalauditratio" label="构成比（%）" min-width="100">
            <template slot-scope="{row, column, $index }">
              {{ showNumberText(row.totalauditratio) }}
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="退回报卡" align="center">
          <el-table-column prop="totalreturncount" label="数量" min-width="80">
            <template slot-scope="{row, column, $index }">
              {{ showNumberText(row.totalreturncount) }}
            </template>
          </el-table-column>
          <el-table-column prop="totalreturnratio" label="构成比（%）" min-width="100">
            <template slot-scope="{row, column, $index }">
              {{ showNumberText(row.totalreturnratio) }}
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="小计" align="center">
          <el-table-column prop="totalcount" label="数量" min-width="80">
            <template slot-scope="{row, column, $index }">
              {{ showNumberText(row.totalcount) }}
            </template>
          </el-table-column>
          <el-table-column prop="totalratio" label="构成比（%）" min-width="100">
            <template slot-scope="{row, column, $index }">
              {{ showNumberText(row.totalratio) }}
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
    </el-row>

    <!-- <el-row class="el-row-flex column-flex">
      <Chart ref="chart" :loading="loading" />
    </el-row> -->

  </div>
</template>

<script>
import { getDiseaseItemByDoctor } from '@/api/report';
import { cloneDeep } from 'lodash';
import Chart from './chart.vue';
import { dateRange, pickerOptions, showNumberText } from './config';


export default {
  name: 'DoctorStatistics',
  components: {
    Chart
  },
  data() {
    return {
      pickerOptions: cloneDeep(pickerOptions),
      dateRange: cloneDeep(dateRange),
      tableData: [],
      loading: false,
    }
  },
  mounted() {
    this.getData();
  },
  methods: {
    async getData() {
      this.loading = true;
      const { data } = await getDiseaseItemByDoctor({ start_date: this.dateRange[0], end_date: this.dateRange[1] }).catch(err => {
        this.loading = false;
      });
      this.loading = false;
      this.tableData = data;
      let chartData = data.map(e => ({ name: e.doctorname, value: e.totalcount }));
      this.$refs?.chart?.setData(chartData)
    },
    showNumberText,
    changeTime() {
      this.getData();
    },
  }
}
</script>

<style lang="scss" scoped>
.container-section {
  padding: 20px;

  .el-row-flex {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    &.column-flex {
      flex-direction: column;
    }

    .chart-type {
      align-items: flex-start;
      display: flex;
      justify-content: flex-start;
      width: 100%;

    }

    &:not(:first-child) {
      margin-top: 16px;
    }
  }
}
</style>
